<template>
  <div class="per_info">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img class="tit_fl_img" @click="$router.go(-1)" src="../assets/myImg/back@2x.png" alt />
      </div>
      <span>个人资料</span>
    </div>

    <!-- 下方信息 -->
    <div class="user_info">
      <!-- 头像 -->
      <div class="info_tx">
        <img class="info_tx_img" :src="userInfo.avatar" alt />
        <img class="info_de" src="../assets/myImg/paizhao@2x.png" alt />
        <input @change="uploadPhoto($event)" type="file" class="kyc_passin" />
      </div>
      <!-- 信息 -->
      <ul class="info_detail">
        <li class="info_detail_item" @click="$router.push({path: '/repairSecret', query:{user: 'user'}})">
          <span>昵称 :</span>
          <span style="width: 6.133333rem;">{{userName}}</span>
          <!-- <input class="input" type="text" placeholder="取个名字吧（20个字符以内）"> -->
          <!-- <img src="../assets/myImg/back.png" alt=""> -->
          <img src="../assets/myImg/back.png" alt />
        </li>

        <li class="info_detail_item" @click="$router.push('/repairSecret')">
          <span>修改密码 :</span>
          <p class="input"></p>
          <img src="../assets/myImg/back.png" alt />
        </li>
      </ul>
      <!-- 退出按钮 -->
      <div class="exit_out" @click="logOut">
        <span>退出</span>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogout, changeImage, getUserInfos } from "../api/perInfo";
export default {
  name: "PerInfo",
  data() {
    return {
      userName: "",
      formImg: "",
      // 用户信息
      userInfo: "",
    };
  },
  methods: {
    // 退出登录
    logOut() {
      userLogout().then((res) => {
        if (res.code == 200) {
          this.$toast({
            duration: 1000,
            message: res.msg,
          });
          window.localStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.$toast({
            duration: 1000,
            message: res.msg,
          });
        }
      });
    },
    // 上传图片
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      let file = e.target.files[0];
      let filesize = file.size;
      let filename = file.name; 
      // 限制大小
      // if (filesize > 2101440) {
      //   // 图片大于2MB
      //   return false
      // }
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        // 读取到的图片base64 数据编码 调用请求
        changeImage(e.target.result).then((res) => {
          if (res.code == 200) {
            // 更新本地头像 
            window.localStorage.setItem("userImg", res.data);
            this.$toast({
              duration: 2000,
              message: "修改成功",
            });
            // 重新加载页面
            this.getUserInfos();
          } else {
            this.$toast({
              duration: 2000,
              message: res.msg,
            });
          }
        });
      };
    },
    // 获取用户信息
    getUserInfos() {
      getUserInfos().then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data; 
        }
      });
    },
  },
  watch:{
    $route(val){
       this.userName = window.localStorage.getItem("username");
    }
  },
  mounted() {
    this.userName = window.localStorage.getItem("username");
    // 获取用户信息
    this.getUserInfos();
  },
};
</script>

<style lang="less" scoped>
// 头部标题
.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem; 
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}

.user_info {
  padding: 0.4rem;
  height: 8.8rem;
  .info_tx {
    margin: 0 auto;
    position: relative;
    width: 2.266667rem;
    height: 2.266667rem;
    .info_tx_img {
      width: 2.133333rem;
      height: 2.133333rem;
      border-radius: 50%;
      border: 0.053333rem solid red;
    }
    .info_de {
      position: absolute;
      right: 0.266667rem;
      top: 1.066667rem;
      width: 0.773333rem;
      height: 0.773333rem;
    }
    .kyc_passin {
      position: relative;
      top: -2.666667rem;
      left: -0.266667rem;
      width: 3rem;
      height: 3rem;
      opacity: 0;
    }
  }
  .info_detail {
    margin-top: 0.8rem;
    overflow: hidden;
    height: 4rem;
    .info_detail_item {
      margin: 0.8rem 0;
      display: flex;
      color: #999;
      font-size: 0.4rem;
      span {
        width: 2.666667rem;
      }
      .input {
        margin-right: 1.6rem;
        flex: 1;
        font-size: 0.4rem;
      }
      img {
        width: 0.373333rem;
        height: 0.373333rem;
      }
    }
  }
}

// 退出按钮
.exit_out {
  margin: 0 0.533333rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  color: #fff;
  font-size: 0.48rem;
  background: #647cfa;
  border-radius: 0.6rem;
}
</style>